<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 资料库</el-breadcrumb-item>
        <el-breadcrumb-item>图片管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <div class="icon-box">
          <el-button type="text"
                     @click="dialogFormVisible = true">
            <i class="icon el-icon-upload2"></i>
            <span class="text">上传</span>
          </el-button>
          <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="图片标题"
                            :label-width="formLabelWidth">
                <el-input v-model="form.name"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="文件类型"
                            :label-width="formLabelWidth">
                <el-input v-model="form.type"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <el-upload class="upload-demo"
                       drag
                       action="https://jsonplaceholder.typicode.com/posts/"
                       multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip"
                   slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <div slot="footer"
                 class="dialog-footer">
              <el-button type="primary"
                         @click="dialogFormVisible = false">确 定</el-button>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>
        <div class="icon-box">
          <i class="icon el-icon-download"></i>
          <span class="text">下载</span>
        </div>
        <div class="icon-box">
          <i class="icon el-icon-view"></i>
          <span class="text">查看</span>
        </div>
        <div class="icon-box">
          <i class="icon el-icon-edit"></i>
          <span class="text">重命名</span>
        </div>
        <div class="icon-box">
          <i class="icon el-icon-delete"></i>
          <span class="text">删除</span>
        </div>
      </div>
      <div class="container">
        <div class="el-col-text">
          <div class="el-col-content">
            <div class="el-col-top">
              <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
                   style="width:100%;height:180px">
              <h4>在雷丁大学访问期间留影</h4>
            </div>
            <div class="el-col-dowm">
              <div class="el-col-bottom">
                <el-button type="text"
                           @click="open">查看</el-button>
              </div>
              <div class="el-col-bottom">
                <el-button type="text"
                           @click="dialogVisible = true">属性</el-button>
                <!-- dialog对话框弹出属性信息 -->
                <el-dialog title="属性"
                           :visible.sync="dialogVisible"
                           width="30%">
                  <!-- 弹出框中的主体内容 -->
                  <span>标题：四川农业大学征稿活动<br />
                    位置：文章库管理/首页<br />
                    创建时间：2020年3月3日8:20<br />
                    创建者：王小<br />
                    修改时间：2020年3月5日9:20<br />
                    地址：http://www.baidu.com<br />
                    大小：432kb</span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="pagination">
      <el-pagination background
                     prev-text="prev"
                     next-text="next"
                     layout="prev, pager, next"
                     :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhotoDetails',
  data () {
    return {
      dialogVisible: false,
      gridData: [{
      }],
      showClose: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        type: '',
        token: this.$store.state.token
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    open () {
      this.$alert('<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg">', '', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false
      });
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
}
</script>

<style scoped>
.el-col-content {
  width: 29%;
  display: inline-block;
  margin: 20px;
}
.iconfont {
  font-size: 50px;
  display: block;
  width: 60px;
  float: left;
  color: rgb(255, 209, 109);
}
.el-col-text {
  width: 95%;
  padding-bottom: 20px;
  margin-left: 3%;
}
.el-col-top {
  width: 100%;
  height: 250px;
  padding: 20px;
  border: 1px solid #ccc;
}
.el-col-dowm {
  width: 100%;
  display: flex;
  height: 40px;
}
.el-col-bottom {
  width: 50%;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ccc;
  transition: all 0.3s linear;
}
.el-col-bottom:hover {
  background-color: #f8f8f8;
  color: #409eff;
}
.container {
  padding: 0;
  overflow: hidden;
}
.el-col-top h4 {
  padding-top: 5px;
  width: 90%;
  text-align: center;
  color: rgb(97, 95, 95);
}
.pagination {
  width: 96.5%;
  height: 80px;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.icon-box {
  width: 82px;
  height: 30px;
  display: inline-block !important;
  text-align: center;
  line-height: 35px;
  margin: 0 20px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s linear;
}
.icon-box:hover {
  background-color: #f8f8f8;
  color: #409eff;
}

.icon-box .icon {
  font-size: 22px;
}
</style>
// 去掉scoped修改组件样式
<style>
.el-message-box {
  width: 600px;
  text-align: center;
}
.el-message-box--center {
  padding-bottom: 0;
}
.el-button--text {
  color: black;
  width: 100%;
  font-size: 14px;
}
.el-dialog__header {
  border-bottom: 1px dashed;
  margin-right: 10px;
  margin-left: 20px;
}
.el-dialog__body {
  text-align: center;
}
</style>